import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import dayjs from "dayjs";
import Calendar from "./components/calendar/index";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: dayjs().format("YYYY-MM-DD"),
      endDate: dayjs().format("YYYY-MM-DD")
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(date) {
    console.log("change", date);
    this.setState({
      startDate: date[0],
      endDate: date[1]
    });
  }
  disabledDate(current) {
    return dayjs().isAfter(current);
  }

  render() {
    return (
      <div className="App">
        <div className="line" >
          北京市
        </div>
        <div className="line">
          <Calendar
            disabledDate={this.disabledDate}
            mode={"range"} //指定是只选择一个日期还是一个日期范围
            day={this.state.startDate} //指定日期
            onChange={this.onChange}
          >
            <div className="slot">
              {/* //自定义显示 */}
              <div className="date-content">
                <p>入住</p>
                <p>{this.state.startDate}</p>
              </div>
              <div className="center">
                <p>————</p>
              </div>
              <div className="date-content">
                <p>离开</p>
                <p>{this.state.endDate}</p>
              </div>
            </div>
          </Calendar>
        </div>
      </div>
    );
  }
}

export default App;
